<!-- 展示容器信息 -->
<div *ngIf="dataSet!=null">
  <div nz-row>
    <div nz-col nzSpan="24" class="detail-info">
      <div nz-row>
        <div nz-col class="detail-title-info">
          <!-- 第一行 -->
          <div nz-row>
            <div nz-col nzSpan="12">
              <span class="cve-title"> CVE 编号 : </span>
              <span class="cve-content">
                <ng-container *ngIf="dataSet?.cve.name; else noCVE">
                  {{ dataSet.cve.name }}
                </ng-container>
                <ng-template #noCVE>
                  暂无数据
                </ng-template>
              </span>
              <div>
                <span class="cve-sub-title">CVSS score: </span>
                <span class="cve-content" style="color:red">
                  <ng-container *ngIf="dataSet?.cve.score; else noData">
                    {{ dataSet.cve.score }}
                  </ng-container>
                  <ng-template #noData>
                    暂无数据
                  </ng-template>
                </span>
              </div>
            </div>
            <div nz-col nzSpan="12" class="float-right pt-pb-30" style="font-size: 20px">
              <i nz-icon type="exclamation-circle" theme="outline" style="color:coral"></i>&nbsp;&nbsp;&nbsp;&nbsp;
              <i nz-icon type="folder-add" theme="outline" style="color:cornflowerblue"></i>&nbsp;&nbsp;&nbsp;&nbsp;
              <i nz-icon type="delete" theme="outline"></i>
            </div>
          </div>

          <div class="detail-divider">
            <nz-divider></nz-divider>
          </div>
          <!-- 第二行 -->
          <div nz-row>
            <div nz-col>
              <span class="cve-title"> CNNVD 编号: </span>
              <span class="cve-content">
                <ng-container *ngIf="dataSet.cnnvd; else noData">
                  {{ dataSet.cnnvd.cnnvdId }}
                </ng-container>
                <ng-template #noData>
                  暂无记录
                </ng-template>
              </span>
            </div>
          </div>

        </div>
      </div>
    </div>

  </div>


  <!-- 展示应用数、服务器数 -->
  <div nz-row>
    <div nz-col nzSpan="24" class="cve-application">
      <div nz-row>
        <div nz-col class="application-title-info">
          影响应用
        </div>
      </div>
      <div nz-row>
        <div nz-col class="application-content-info">
          <nz-list [nzGrid]="{gutter: 16, xs: 24, sm: 12, md: 6, lg: 6, xl: 4 }">
            <span *ngFor="let app of dataSet.influenceApp">
              <i nz-icon type="windows" theme="outline"></i>
              <a href="javascript:;" class="cve-application-list">
                {{ app.name }}
              </a>
            </span>
          </nz-list>
        </div>
      </div>
      <div class="detail-divider">
        <nz-divider></nz-divider>
      </div>
      <div nz-row>
        <div nz-col class="application-title-info">
          部署服务器
        </div>
      </div>
      <div nz-row>
        <div nz-col class="application-title-info">
          <nz-list [nzGrid]="{gutter: 16, xs: 24, sm: 12, md: 6, lg: 6, xl: 4 }">
            <!-- <ng-container *ngIf="expression; else elseTemplate">
              
            </ng-container>
            <ng-template #elseTemplate>
              
            </ng-template> -->

            <span *ngFor="let item of dataSet.server;let key=index">
              <i class="icon-sac-server"></i>
              <a href="javascript:;" class="cve-application-list">
                {{ dataSet.server[key] }}
              </a>
              <i class="heart icon-sac-heart"></i>
            </span>
          </nz-list>
        </div>
      </div>
    </div>
  </div>

  <div style="margin-top: 30px;">
    <div nz-row>
      <div nz-col nzSpan="12" class="cve-title">CVE</div>
      <div nz-col nzSpan="12" class="cve-title">CNNVD</div>
    </div>
    <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 8, xl: 8, xxl: 8 }" class="detail-cve-content">
      <div nz-col nzSpan="11">
        <div nz-row class="deatail-box">
          <div nz-col>
            <div>
              <a href="javascript:;" class="panel-title2">
                <ng-container *ngIf="dataSet?.cve.name; else noData">
                  {{dataSet.cve.name}}
                </ng-container>
                <ng-template #noData>
                  暂无数据
                </ng-template>
              </a>
              分数
              <ng-container *ngIf="dataSet?.cve.score; else noData">
                {{dataSet.cve.score}}
              </ng-container>
              <ng-template #noData>
                暂无数据
              </ng-template>
            </div>
          </div>
        </div>
        <div nz-row class="deatail-box">
          <div nz-col>
            <div>
              <div nz-row>
                <div nz-col [nzSpan]="12">访问复杂性:
                  <strong>
                    <ng-container *ngIf="dataSet?.cve.accessComplexity; else noData">
                      {{ dataSet.cve.accessComplexity }}
                    </ng-container>
                    <ng-template #noData>
                      暂无数据
                    </ng-template>
                  </strong>
                </div>
                <div nz-col [nzSpan]="12">可用性影响:
                  <strong>
                    <ng-container *ngIf="dataSet?.cve.availabilityImpact ; else noData">
                      {{ dataSet.cve.availabilityImpact  }}
                    </ng-container>
                    <ng-template #noData>
                      暂无数据
                    </ng-template>
                  </strong>
                </div>
              </div>
              <div nz-row>
                <div nz-col [nzSpan]="12">访问矢量:
                  <strong>
                    <ng-container *ngIf="dataSet?.cve.accessVector ; else noData">
                      {{ dataSet.cve.accessVector  }}
                    </ng-container>
                    <ng-template #noData>
                      暂无数据
                    </ng-template>
                  </strong>
                </div>
                <div nz-col [nzSpan]="12">保密性影响:
                  <strong>
                    <ng-container *ngIf="dataSet?.cve.confidentialityImpact; else noData">
                      {{ dataSet.cve.confidentialityImpact  }}
                    </ng-container>
                    <ng-template #noData>
                      暂无数据
                    </ng-template>
                  </strong>
                </div>
              </div>
              <div nz-row>
                <div nz-col [nzSpan]="12">需要验证:
                  <strong>
                    <ng-container *ngIf="dataSet?.cve.authentication; else noData">
                      {{ dataSet.cve.authentication }}
                    </ng-container>
                    <ng-template #noData>
                      暂无数据
                    </ng-template>
                  </strong>
                </div>
                <div nz-col [nzSpan]="12">完整性影响:
                  <strong>
                    <ng-container *ngIf="dataSet?.cve.integrityImpact; else noData">
                      {{ dataSet.cve.integrityImpact }}
                    </ng-container>
                    <ng-template #noData>
                      暂无数据
                    </ng-template>
                  </strong>
                </div>
              </div>
            </div>
          </div>

        </div>
        <div nz-row class="deatail-box">
          <div nz-col>
            <div>
              <ng-container *ngIf="dataSet?.cve.description; else noData">
                {{ dataSet.cve.description }}
              </ng-container>
              <ng-template #noData>
                暂无数据
              </ng-template>
            </div>
          </div>
        </div>
      </div>

      <div nz-col class="detail-divider" nzSpan="1">
        <div class="divider-vertical"></div>
      </div>

      <div nz-col nzSpan="12">
        <!-- {{cnnvd}}----我是没数据的 -->
        <ng-container *ngIf="dataSet?.cnnvd; else noCNNVD">
          <div nz-row class="deatail-box">
            <div nz-col>
              <div>
                <a href="javascript:;" class="panel-title2">
                  <ng-container *ngIf="dataSet.cnnvd?.name; else noData">
                    {{dataSet.cnnvd.name}}
                  </ng-container>
                  <ng-template #noData>
                    暂无记录
                  </ng-template>
                </a>
              </div>
            </div>
          </div>

          <div nz-row class="deatail-box">
            <div nz-col>
              <div>
                <div nz-row>
                  <div nz-col [nzSpan]="12">CNNVD编号:
                    <strong>
                      <ng-container *ngIf="dataSet.cnnvd?.integrityImpact; else noData">
                        {{ dataSet.cnnvd.cnnvdId }}
                      </ng-container>
                      <ng-template #noData>
                        暂无记录
                      </ng-template>
                    </strong>
                  </div>
                  <div nz-col [nzSpan]="12">威胁类型:
                    <strong>
                      <ng-container *ngIf="dataSet.cnnvd?.integrityImpact; else noData">
                        {{ dataSet.cnnvd.integrityImpact }}
                      </ng-container>
                      <ng-template #noData>
                        暂无记录
                      </ng-template>
                    </strong>
                  </div>
                </div>
                <div nz-row>
                  <div nz-col [nzSpan]="12">危害等级:
                    <strong>
                      <ng-container *ngIf="dataSet.cnnvd?.severity; else noData">
                        {{ dataSet.cnnvd.severity }}
                      </ng-container>
                      <ng-template #noData>
                        暂无记录
                      </ng-template>
                    </strong>
                  </div>
                  <div nz-col [nzSpan]="12">发布时间:
                    <strong>
                      <ng-container *ngIf="dataSet.cnnvd?.publishedDate; else noData">
                        {{ dataSet.cnnvd.publishedDate }}
                      </ng-container>
                      <ng-template #noData>
                        暂无记录
                      </ng-template>
                    </strong>
                  </div>
                </div>
                <div nz-row>
                  <div nz-col [nzSpan]="12">CVE编号:
                    <strong>
                      <ng-container *ngIf="dataSet.cnnvd?.cveId; else noData">
                        {{ dataSet.cnnvd.cveId }}
                      </ng-container>
                      <ng-template #noData>
                        暂无记录
                      </ng-template>
                    </strong>
                  </div>
                  <div nz-col [nzSpan]="12">更新时间:
                    <strong>
                      <ng-container *ngIf="dataSet.cnnvd?.modifiedDate; else noData">
                        {{ dataSet.cnnvd.modifiedDate }}
                      </ng-container>
                      <ng-template #noData>
                        暂无记录
                      </ng-template>
                    </strong>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div nz-row class="deatail-box">
            <div nz-col>
              <div>
                <ng-container *ngIf="dataSet?.cnnvd.vulnDescript; else noData">
                  {{ dataSet.cnnvd.vulnDescript }}
                </ng-container>
                <ng-template #noData>
                  暂无记录
                </ng-template>
              </div>
            </div>
          </div>
        </ng-container>
        <ng-template #noCNNVD>
          <div class="no-data">暂无记录</div>
        </ng-template>
      </div>
    </div>
  </div>
</div>
